<template>
  <search-panel
    ref="searchPanelRef"
    v-model="searchForm"
    :config="searchConfig"
    @query="handleQuery"
    @reset="handleReset"
  />
  <el-card>
    <data-table
      :config="tableConfig"
      :data-list="tableDataList"
      :data-count="tableDataCount"
      :pagination="tablePagination"
      @currentChange="handleCurrentChange"
      @sizeChange="handleSizeChange"
    >
      <template #header>
        <el-button type="primary" size="small" @click="handleTableHeaderAdd">
          <i class="el-icon-plus"></i> 添加场所
        </el-button>
      </template>
      <template #name="scope">
        <div class="icafe-name">
          {{ scope.row.name }}
          <el-tooltip effect="dark" content="点击查看详细信息" placement="top">
            <el-icon class="info-icon" color="#409eff" :size="17">
              <warning-filled @click="handleRowShowTechData(scope.row)" />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
      <template #category="scope">
        {{ scope.row.category?.name ?? '未知分组' }}
      </template>
      <template #region="scope">
        {{ $store.getters['showRegions'](scope.row.district_id) }}
      </template>
      <template #status="scope">
        <el-tag size="medium" :type="scope.row.status === 1 ? 'success' : 'danger'">
          {{ scope.row.status === 1 ? '已启用' : '已禁用' }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button size="mini" type="text" @click="handleRowEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="text" @click="handleRowEditTechData(scope.row)">技术资料</el-button>
        <el-popconfirm title="确定删除？" @confirm="handleRowDelete(scope.row)">
          <template #reference>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </data-table>
  </el-card>
  <mm-dialog
    ref="mainDialogRef"
    :config="mainDialogConfig"
    :defaultData="mainDialogDefaultData"
    :rules="mainDialogValidateRules"
  >
    <template #footer>
      <el-button @click="handleDialogCancel">取 消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
    </template>
  </mm-dialog>
  <tech-data-dialog ref="techDataDialogRef" :data="techDataDialogData" :mode="techDataDialogMode"></tech-data-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { WarningFilled } from '@element-plus/icons'
import { PageOptions, usePage } from '@/hooks/use-page'
import * as icafeApi from '@/api/customer/icafe'
import SearchPanel from '@/components/search-panel/index.vue'
import DataTable from '@/components/data-table/index.vue'
import MmDialog from '@/components/mm-dialog/index.vue'
import TechDataDialog from './components/tech-data-dialog/index.vue'
import { searchConfig } from './config/search.config'
import { tableConfig } from './config/table.config'
import { dialogConfig as mainDialogConfig } from './config/main-dialog.config'
import { deepClone } from '@/utils/common'

export default defineComponent({
  name: 'Icafe',
  components: { SearchPanel, DataTable, MmDialog, WarningFilled, TechDataDialog },
  setup() {
    // 页面配置选项
    const pageOptions: PageOptions = {
      initStoreModule: 'icafe',
      searchFormItems: searchConfig.formItems,
      dialogLayoutRows: mainDialogConfig.layout,
      checkPermissions: ['view', 'create', 'update', 'delete', 'update:tech']
    }

    // 页面逻辑
    const {
      searchForm,
      searchPanelRef,
      tableDataList,
      tableDataCount,
      tablePagination,
      handleQuery,
      handleReset,
      handleCurrentChange,
      handleSizeChange,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      pagePermissions,
      getDataList,
      createData,
      updateData,
      deleteData
    } = usePage(icafeApi, pageOptions)

    /**
     * 表格相关事件
     */
    // 表格工具栏 - 添加
    const handleTableHeaderAdd = () => {
      if (!pagePermissions['create']) {
        ElMessage.error('权限不足')
        return
      }
      mainDialogDefaultData.value = {}
      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 编辑
    const handleRowEdit = (row: any) => {
      if (!pagePermissions['update']) {
        ElMessage.error('权限不足')
        return
      }

      mainDialogDefaultData.value = deepClone(row)
      // 单独处理“所属地区”
      mainDialogDefaultData.value.region = [row.province_id, row.city_id, row.district_id]
      delete mainDialogDefaultData.value.province_id
      delete mainDialogDefaultData.value.city_id
      delete mainDialogDefaultData.value.district_id

      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 删除
    const handleRowDelete = (row: any) => {
      if (!pagePermissions['delete']) {
        ElMessage.error('权限不足')
        return
      }
      deleteData(row.id)
    }

    /**
     * 主对话框相关事件
     */
    // 取消按钮
    const handleDialogCancel = () => {
      mainDialogRef.value?.visible(false)
    }

    // 确定按钮
    const handleDialogConfirm = () => {
      mainDialogRef.value?.validate((isValid) => {
        if (!isValid) {
          return
        }

        // 单独处理“所属地区”
        const dialogForm = deepClone(mainDialogRef.value!.dialogForm)
        dialogForm.province_id = mainDialogRef.value?.dialogForm.region[0]
        dialogForm.city_id = mainDialogRef.value?.dialogForm.region[1]
        dialogForm.district_id = mainDialogRef.value?.dialogForm.region[2]
        delete dialogForm.region

        if (Object.keys(mainDialogDefaultData.value).length) {
          updateData(mainDialogDefaultData.value.id, dialogForm)
        } else {
          createData(dialogForm)
        }
      })
    }

    /**
     * 技术资料窗口相关
     */
    const techDataDialogRef = ref<InstanceType<typeof TechDataDialog>>()
    const techDataDialogData = ref({})
    const techDataDialogMode = ref('')

    // 展示
    const handleRowShowTechData = (row: any) => {
      if (!pagePermissions['view']) {
        ElMessage.error('权限不足')
        return
      }
      techDataDialogData.value = row
      techDataDialogMode.value = 'show'
      techDataDialogRef.value?.visible(true)
    }

    // 修改
    const handleRowEditTechData = (row: any) => {
      if (!pagePermissions['update:tech']) {
        ElMessage.error('权限不足')
        return
      }
      techDataDialogData.value = row
      techDataDialogMode.value = 'edit'
      techDataDialogRef.value?.visible(true)
    }

    return {
      // 搜索部分
      searchConfig,
      searchForm,
      searchPanelRef,
      handleQuery,
      handleReset,
      // 表格部分
      tableConfig,
      tableDataList,
      tableDataCount,
      tablePagination,
      handleCurrentChange,
      handleSizeChange,
      handleTableHeaderAdd,
      handleRowEdit,
      handleRowDelete,
      // 对话框部分
      mainDialogConfig,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      handleDialogCancel,
      handleDialogConfirm,
      // 资料窗口部分
      techDataDialogRef,
      techDataDialogData,
      techDataDialogMode,
      handleRowShowTechData,
      handleRowEditTechData
    }
  }
})
</script>

<style lang="less" scoped>
.icafe-name {
  .info-icon {
    display: none;
    vertical-align: middle;
    cursor: pointer;
  }
  &:hover .info-icon {
    display: inline;
  }
}

.el-button :deep + .el-dropdown,
.el-dropdown + .el-button {
  margin-left: 10px;
}
</style>
